@use "sass:map";
@use "../variable";
@use "../helper";

.btn {
  border-radius: variable.$btn-border-radius;
  border-collapse: separate !important;
}

.btn td {
  border-radius: variable.$btn-border-radius;
  text-align: center;
}

.btn td a {
  font-size: variable.$btn-font-size;
  font-family: variable.$btn-font-family;
  text-decoration: none;
  border-radius: variable.$btn-border-radius;
  padding: variable.$btn-padding-y variable.$btn-padding-x;
  line-height: variable.$btn-line-height;
  border: variable.$btn-border-width solid transparent;
  display: block;
  font-weight: variable.$btn-font-weight;
  white-space: nowrap;
}

@each $name, $theme in variable.$btn-themes {
  .btn-#{$name} td {
    background-color: helper.hex(map.get($theme, "background-color"));
  }
  .btn-#{$name} td a {
    background-color: helper.hex(map.get($theme, "background-color"));
    color: helper.hex(map.get($theme, "color"));
    border-color: helper.hex(map.get($theme, "border-color"));
  }
}

.btn-sm td a {
  font-size: variable.$btn-font-size-sm;
  padding: variable.$btn-padding-y-sm variable.$btn-padding-x-sm;
  line-height: variable.$btn-line-height-sm;
  border-radius: variable.$btn-border-radius-sm;
}

.btn-lg td a {
  font-size: variable.$btn-font-size-lg;
  padding: variable.$btn-padding-y-lg variable.$btn-padding-x-lg;
  line-height: variable.$btn-line-height-lg;
  border-radius: variable.$btn-border-radius-lg;
}
